<div id="grid"></div>

<script>
    $(document).ready(function () {
            dataSource = new kendo.data.DataSource({
                transport: {
                    read:  {
                        url: "menu/get_data.php",
                        dataType: "json"
                    },
                    update: {
                        url: "menu/get_data.php",
                        dataType: "jsonp"
                    },
                    destroy: {
                        url: "menu/get_data.php",
                        dataType: "jsonp"
                    },
                    create: {
                        url: "menu/get_data.php",
                        dataType: "jsonp"
                    },
                    parameterMap: function(options, operation) {
                        if (operation !== "read" && options.models) {
                            return {models: kendo.stringify(options.models)};
                        }
                    }
                },
                batch: true,
                pageSize: 20,
               
            });

        $("#grid").kendoGrid({
            dataSource: dataSource,
            pageable: true,
            height: 430,
            columns: [
                { field:"id", title: "ID", width:"50px" },
                { field: "name", title:"Name", format: "{0:c}", width: "150px" },
                { field: "menu_parent", title:"Parent", width: "70px" },
                { field: "position", title:"Position", width: "70px" },
                { field: "create_date", title:"Create Date", width: "150px" },
                { command: ["edit", "destroy"], title: "&nbsp;", width: "160px" }],
            editable: "popup"
        });
    });
</script>

